import { Header } from '../components/Header';
import { Footer } from '../components/Footer';
import { ImageWithLoading } from '../components/ImageWithLoading';
import PageHeader from '../components/PageHeader';
import { useDocumentTitle } from '../hooks/useDocumentTitle';
import { Shield, Users, Microscope, BookOpen } from 'lucide-react';
export const AboutPage = () => {
  useDocumentTitle('About Us');
  
  const team = [{
    name: 'Dr. Sarah Chen',
    role: 'Medical Director',
    image: 'https://randomuser.me/api/portraits/women/68.jpg',
    bio: 'Board-certified physician with over 15 years of experience in internal medicine and healthcare technology assessment.'
  }, {
    name: 'Michael Rodriguez',
    role: 'Chief Product Tester',
    image: 'https://randomuser.me/api/portraits/men/32.jpg',
    bio: 'Former medical device engineer with expertise in product usability and technical performance evaluation.'
  }, {
    name: 'Dr. Aisha Johnson',
    role: 'Health Technology Advisor',
    image: 'https://randomuser.me/api/portraits/women/44.jpg',
    bio: 'Specialist in healthcare innovation with a focus on digital health technologies and patient-centered design.'
  }, {
    name: 'Robert Kim',
    role: 'Senior Editor',
    image: 'https://randomuser.me/api/portraits/men/22.jpg',
    bio: 'Health journalist with 10+ years experience translating complex medical information for general audiences.'
  }];
  const values = [{
    icon: <Shield className="h-8 w-8 text-[#5cb8b2]" />,
    title: 'Scientific Integrity',
    description: 'We base our evaluations on rigorous testing and evidence-based assessment.'
  }, {
    icon: <Users className="h-8 w-8 text-[#5cb8b2]" />,
    title: 'User-Centered',
    description: 'We prioritize real-world usability and the needs of diverse healthcare consumers.'
  }, {
    icon: <Microscope className="h-8 w-8 text-[#5cb8b2]" />,
    title: 'Thorough Research',
    description: 'We conduct extensive research on each product category before making recommendations.'
  }, {
    icon: <BookOpen className="h-8 w-8 text-[#5cb8b2]" />,
    title: 'Educational Focus',
    description: 'We aim to empower consumers with knowledge to make informed healthcare decisions.'
  }];
  return <div className="flex flex-col min-h-screen w-full bg-white">
      <Header />
      <main className="flex-grow">
        <PageHeader 
          title="About MedSelectHub"
          subtitle="We're dedicated to helping you make informed decisions about healthcare products through rigorous testing and expert guidance."
          icon={Users}
        />
        <div className="py-16 bg-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="lg:grid lg:grid-cols-2 lg:gap-16">
              <div>
                <h2 className="text-3xl font-bold text-[#0e4c92]">
                  Our Mission
                </h2>
                <p className="mt-4 text-lg text-gray-600">
                  At MedSelectHub, we believe everyone deserves access to
                  reliable, unbiased information about healthcare products. Our
                  mission is to empower consumers to make confident,
                  well-informed decisions about their health needs.
                </p>
                <p className="mt-4 text-lg text-gray-600">
                  Through rigorous testing, expert analysis, and clear
                  communication, we provide trustworthy guidance that
                  prioritizes your wellbeing and helps navigate the complex
                  world of healthcare products.
                </p>
              </div>
              <div className="mt-12 lg:mt-0">
                <ImageWithLoading src="https://picsum.photos/1000/600?random=healthcare" alt="Healthcare professionals reviewing medical equipment" className="rounded-lg shadow-lg" />
              </div>
            </div>
            <div className="mt-20">
              <h2 className="text-3xl font-bold text-[#0e4c92] text-center">
                Our Values
              </h2>
              <div className="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
                {values.map((value, index) => <div key={index} className="flex flex-col items-center p-6 bg-[#f5f7fa] rounded-lg">
                    <div className="p-3 bg-white rounded-full shadow-sm">
                      {value.icon}
                    </div>
                    <h3 className="mt-5 text-xl font-semibold text-[#0e4c92]">
                      {value.title}
                    </h3>
                    <p className="mt-3 text-center text-gray-600">
                      {value.description}
                    </p>
                  </div>)}
              </div>
            </div>
            <div className="mt-20">
              <h2 className="text-3xl font-bold text-[#0e4c92] text-center">
                Our Team
              </h2>
              <p className="mt-4 text-lg text-center text-gray-600 max-w-3xl mx-auto">
                Meet the experts behind MedSelectHub's trusted reviews and
                guides
              </p>
              <div className="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
                {team.map((member, index) => <div key={index} className="flex flex-col items-center">
                    <div className="w-32 h-32 overflow-hidden rounded-full">
                      <ImageWithLoading src={member.image} alt={member.name} className="w-full h-full object-cover" />
                    </div>
                    <h3 className="mt-4 text-xl font-semibold text-[#0e4c92]">
                      {member.name}
                    </h3>
                    <p className="text-[#5cb8b2] font-medium">{member.role}</p>
                    <p className="mt-2 text-center text-gray-600">
                      {member.bio}
                    </p>
                  </div>)}
              </div>
            </div>
            <div className="mt-20 bg-[#f5f7fa] rounded-lg p-8">
              <h2 className="text-2xl font-bold text-[#0e4c92]">
                Our Review Process
              </h2>
              <div className="mt-6 space-y-6">
                <div className="flex">
                  <div className="flex-shrink-0">
                    <div className="flex items-center justify-center h-12 w-12 rounded-md bg-[#0e4c92] text-white">
                      <span className="text-xl font-bold">1</span>
                    </div>
                  </div>
                  <div className="ml-4">
                    <h3 className="text-lg font-medium text-[#0e4c92]">
                      Research
                    </h3>
                    <p className="mt-2 text-gray-600">
                      We thoroughly research each product category to understand
                      key features, technologies, and user needs.
                    </p>
                  </div>
                </div>
                <div className="flex">
                  <div className="flex-shrink-0">
                    <div className="flex items-center justify-center h-12 w-12 rounded-md bg-[#0e4c92] text-white">
                      <span className="text-xl font-bold">2</span>
                    </div>
                  </div>
                  <div className="ml-4">
                    <h3 className="text-lg font-medium text-[#0e4c92]">
                      Testing
                    </h3>
                    <p className="mt-2 text-gray-600">
                      Our team conducts hands-on testing of products in
                      real-world scenarios to evaluate performance and
                      usability.
                    </p>
                  </div>
                </div>
                <div className="flex">
                  <div className="flex-shrink-0">
                    <div className="flex items-center justify-center h-12 w-12 rounded-md bg-[#0e4c92] text-white">
                      <span className="text-xl font-bold">3</span>
                    </div>
                  </div>
                  <div className="ml-4">
                    <h3 className="text-lg font-medium text-[#0e4c92]">
                      Expert Review
                    </h3>
                    <p className="mt-2 text-gray-600">
                      Healthcare professionals review our findings to ensure
                      accuracy and clinical relevance.
                    </p>
                  </div>
                </div>
                <div className="flex">
                  <div className="flex-shrink-0">
                    <div className="flex items-center justify-center h-12 w-12 rounded-md bg-[#0e4c92] text-white">
                      <span className="text-xl font-bold">4</span>
                    </div>
                  </div>
                  <div className="ml-4">
                    <h3 className="text-lg font-medium text-[#0e4c92]">
                      Publication
                    </h3>
                    <p className="mt-2 text-gray-600">
                      We publish clear, accessible guides that help you make the
                      best choice for your specific needs.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>;
};